<template>
  <div class="container">
    <!-- 头部固定 -->
    <mt-header fixed :title="address.name">
      <router-link to="/" slot="left">
        <mt-button icon="search"></mt-button>
      </router-link>
      <mt-button slot="right" v-if="userInfo.username" @click="goto">
        <img src="./images/nav/person.png" height="30" width="30" slot="icon">
      </mt-button>
      <mt-button slot="right" v-else  @click="goto">登录|注册</mt-button>
    </mt-header>
    <!--菜单轮播图  -->
    <mt-swipe :auto="0" v-if="categorysArry.length>0">
      <mt-swipe-item v-for="(item,index) in categorysArry" :key="index">
        <ul>
          <li v-for="(item,index) in item" :key="index">
            <router-link to>
              <img :src="'https://fuss10.elemecdn.com'+item.image_url" alt="图片">
              <span>{{item.title}}</span>
            </router-link>
          </li>
        </ul>
      </mt-swipe-item>
    </mt-swipe>
    <div v-else class="hidden"></div>
    <!-- 商家列表 -->
    <ShopList></ShopList>
  </div>
</template>
<script>
import ShopList from "../../components/ShopList/ShopList";
import { mapState } from "vuex";
export default {
  data() {
    return {};
  },
  methods: {
      goto(){
      if(this.userInfo.username){
         this.$router.push('/userinfo')
      }
      else{
        this.$router.push('/login')
      }
    },
  },
  components: { ShopList },
  computed: {
    ...mapState(["address", "categorys", "userInfo"]), //去store中取 address 数据

    /*根据一维数组生成二位数组，二维数组里的数量最大为10  */
    categorysArry() {
      let baseArray = this.categorys;
      console.log("categorys",this.categorys,this.categorys.length)
      console.log("address",this.address,this.address.length)
      let len = baseArray.length;
      let n = 10; //假设每行显示4个
      let lineNum = len % n === 0 ? len / n : Math.floor(len / n + 1);
      let res = []; //二维数组
      for (let i = 0; i < lineNum; i++) {
        // slice() 方法返回一个从开始到结束（不包括结束）选择的数组的一部分浅拷贝到一个新数组对象。且原始数组不会被修改。 let
        var temp = baseArray.slice(i * n, i * n + n);
        res.push(temp);
      }
      return res;
    }
  }
};
</script>
<style lang="stylus" scoped>
.container {
  height: 92vh;
  overflow: auto;
}

/* 头部固定 */
.mint-header {
  background-color: rgb(0, 143, 255);
  font-size: 0.35rem;
}

/* 菜单轮播图 */
.mint-swipe {
  width: 100%;
  height: 3.3rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  margin-top: 40px;

  .mint-swipe-item {
    ul {
      display: flex;
      flex-flow: wrap;

      li {
        width: 20%;
        margin-bottom: 18px;

        a {
          text-decoration: none;
          color: #666;
          display: flex;
          flex-flow: wrap;
          justify-content: center;
          align-content: center;

          img {
            width: 60%;
            height: 1rem;
            max-width: 100%;
            max-height: 100%;
          }

          span {
            font-size: 0.13rem;
            width: 100%;
            text-align: center;
          }
        }
      }
    }
  }

  .mint-swipe-indicators {
    .mint-swipe-indicator {
      background-color: rgb(0, 143, 255);
    }
  }
}

.hidden {
  font-size: 18px;
}

/* 商家列表 */
</style>
